<template>
  <div class="tactical-resource-container">
    <div class="page-header">
      <div class="header-content">
        <h2>战术资源管理</h2>
        <p>管理战术训练所需的各类资源文件</p>
      </div>
      <div class="header-actions">
        <el-button type="primary" @click="uploadResource">
          <el-icon><Upload /></el-icon>
          上传资源
        </el-button>
      </div>
    </div>

    <div class="content-wrapper">
      <div class="filter-section">
        <el-form :model="filterForm" inline>
          <el-form-item label="资源名称">
            <el-input 
              v-model="filterForm.name" 
              placeholder="请输入资源名称"
              clearable
              @clear="handleSearch"
              @keyup.enter="handleSearch"
            />
          </el-form-item>
          <el-form-item label="资源类型">
            <el-select v-model="filterForm.type" placeholder="请选择类型" clearable>
              <el-option label="脚本文件" value="script" />
              <el-option label="配置文件" value="config" />
              <el-option label="镜像文件" value="image" />
              <el-option label="文档资料" value="document" />
              <el-option label="工具软件" value="tool" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="resource-grid">
        <div
          v-for="resource in tableData"
          :key="resource.id"
          class="resource-card"
        >
          <div class="card-header">
            <div class="resource-icon">
              <el-icon :size="32" :color="getTypeColor(resource.type)">
                <component :is="getTypeIcon(resource.type)" />
              </el-icon>
            </div>
            <div class="card-actions">
              <el-dropdown @command="handleAction">
                <el-button link size="small">
                  <el-icon><MoreFilled /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :command="{action: 'download', data: resource}">下载</el-dropdown-item>
                    <el-dropdown-item :command="{action: 'edit', data: resource}">编辑</el-dropdown-item>
                    <el-dropdown-item :command="{action: 'share', data: resource}">分享</el-dropdown-item>
                    <el-dropdown-item :command="{action: 'delete', data: resource}" divided>删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          
          <div class="card-content">
            <h3 class="resource-name" :title="resource.name">{{ resource.name }}</h3>
            <p class="resource-description">{{ resource.description }}</p>
            
            <div class="resource-meta">
              <el-tag :type="getTypeTagType(resource.type)" size="small">
                {{ getTypeLabel(resource.type) }}
              </el-tag>
              <span class="file-size">{{ formatFileSize(resource.size) }}</span>
            </div>
            
            <div class="resource-footer">
              <span class="upload-time">{{ resource.uploadTime }}</span>
              <span class="download-count">下载: {{ resource.downloadCount }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[12, 24, 48, 96]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Upload, 
  Search, 
  MoreFilled, 
  Document, 
  Setting, 
  Files, 
  VideoPlay,
  Tools
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const loading = ref(false)
const tableData = ref([])

// 筛选表单
const filterForm = reactive({
  name: '',
  type: ''
})

// 分页配置
const pagination = reactive({
  page: 1,
  pageSize: 12,
  total: 0
})

// 模拟数据
const mockData = [
  {
    id: 1,
    name: 'nmap-scan.sh',
    type: 'script',
    description: '网络扫描脚本，用于端口扫描和主机发现',
    size: 2048,
    uploadTime: '2024-01-15 10:30:00',
    downloadCount: 25
  },
  {
    id: 2,
    name: 'nginx.conf',
    type: 'config',
    description: 'Web服务器配置文件模板',
    size: 1024,
    uploadTime: '2024-01-16 09:15:00',
    downloadCount: 18
  },
  {
    id: 3,
    name: 'ubuntu-20.04.iso',
    type: 'image',
    description: 'Ubuntu 20.04 操作系统镜像文件',
    size: 2147483648,
    uploadTime: '2024-01-17 11:00:00',
    downloadCount: 5
  },
  {
    id: 4,
    name: 'penetration-testing-guide.pdf',
    type: 'document',
    description: '渗透测试指南文档',
    size: 5242880,
    uploadTime: '2024-01-18 14:20:00',
    downloadCount: 32
  },
  {
    id: 5,
    name: 'metasploit-framework.zip',
    type: 'tool',
    description: '渗透测试工具包',
    size: 104857600,
    uploadTime: '2024-01-19 16:45:00',
    downloadCount: 12
  }
]

// 生命周期
onMounted(() => {
  fetchData()
})

// 方法
const fetchData = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    tableData.value = mockData
    pagination.total = mockData.length
  } catch (error) {
    ElMessage.error('获取数据失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.page = 1
  fetchData()
}

const resetFilter = () => {
  filterForm.name = ''
  filterForm.type = ''
  handleSearch()
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
  fetchData()
}

const handleCurrentChange = (page) => {
  pagination.page = page
  fetchData()
}

const uploadResource = () => {
  router.push('/tactical-resource/upload')
}

const handleAction = ({ action, data }) => {
  switch (action) {
    case 'download':
      downloadResource(data)
      break
    case 'edit':
      editResource(data)
      break
    case 'share':
      shareResource(data)
      break
    case 'delete':
      deleteResource(data)
      break
  }
}

const downloadResource = (resource) => {
  ElMessage.success(`正在下载: ${resource.name}`)
  // 这里应该实现实际的下载逻辑
}

const editResource = (resource) => {
  ElMessage.info(`编辑资源: ${resource.name}`)
  // 这里应该跳转到编辑页面或打开编辑对话框
}

const shareResource = (resource) => {
  ElMessage.info(`分享资源: ${resource.name}`)
  // 这里应该实现分享功能
}

const deleteResource = (resource) => {
  ElMessageBox.confirm(`确认删除资源"${resource.name}"吗？此操作不可恢复。`, '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(() => {
    const index = tableData.value.findIndex(item => item.id === resource.id)
    if (index > -1) {
      tableData.value.splice(index, 1)
      pagination.total--
      ElMessage.success('删除成功')
    }
  })
}

// 工具函数
const getTypeIcon = (type) => {
  const iconMap = {
    script: Document,
    config: Setting,
    image: VideoPlay,
    document: Files,
    tool: Tools
  }
  return iconMap[type] || Document
}

const getTypeColor = (type) => {
  const colorMap = {
    script: '#67C23A',
    config: '#E6A23C',
    image: '#409EFF',
    document: '#F56C6C',
    tool: '#909399'
  }
  return colorMap[type] || '#909399'
}

const getTypeTagType = (type) => {
  const tagMap = {
    script: 'success',
    config: 'warning',
    image: 'primary',
    document: 'danger',
    tool: 'info'
  }
  return tagMap[type] || 'info'
}

const getTypeLabel = (type) => {
  const labelMap = {
    script: '脚本文件',
    config: '配置文件',
    image: '镜像文件',
    document: '文档资料',
    tool: '工具软件'
  }
  return labelMap[type] || '未知类型'
}

const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}
</script>

<style lang="scss" scoped>
.tactical-resource-container {
  padding: 20px;
  background-color: var(--bg-color);
}

  .header-content {
    h2 {
      margin: 0 0 8px 0;
      color: var(--text-color);
      font-size: 24px;
      font-weight: 600;
    }

    p {
      margin: 0;
      color: var(--text-color-secondary);
      font-size: 14px;
    }
  }

.content-wrapper {
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}

.filter-section {
  border-bottom: 1px solid var(--border-color);
}

.resource-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.resource-card {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;

    .resource-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      background-color: var(--bg-color-secondary);
      border-radius: 8px;
    }
  }

  .card-content {
    .resource-name {
      margin: 0 0 8px 0;
      font-size: 16px;
      font-weight: 600;
      color: var(--text-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .resource-description {
      margin: 0 0 12px 0;
      font-size: 14px;
      color: var(--text-color-secondary);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .resource-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .file-size {
        font-size: 12px;
        color: var(--text-color-secondary);
      }
    }

    .resource-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: var(--text-color-secondary);
    }
  }
}

.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  border-top: 1px solid var(--border-color);
}
</style> 